// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Tag, Button, TagValue, Action } from '../imports';
import { bar } from '../style.css';
import Person from '@mdi/svg/svg/account.svg';

export function TagPage() {
	let lb: Tag;
	return (
		<>
			<h2>标签</h2>
			<div class={bar}>
				<Tag
					options={['备选项', '另一个备选', 'option1', { value: 1, text: 'option2' }]}
					placeholder="请输入..."
					maxTags={3}
					maxLength={10}
					prefixIcon={Person}
					ref={(t) => (lb = t)}
				/>

				<Button
					textContent="赋值"
					onClick={() => {
						lb.setValue(['value1', 'value2', { value: 'v3', text: '取值3' }]);
					}}
				/>
				<Button
					textContent="切换只读"
					onClick={() => {
						lb.setReadOnly(!lb.readOnly);
					}}
				/>
				<Button
					textContent="切换禁用"
					onClick={() => {
						lb.setDisabled(!lb.disabled);
					}}
				/>
				<Button
					textContent="切换只能选则"
					onClick={() => {
						lb.setSelectOnly(!lb.selectOnly);
					}}
				/>
				<Tag
					placeholder="自定义输入..."
					prefixIcon={Person}
					selectOnly
					onOpenSelection={() => {
						return new Promise<TagValue[]>((resolve) => {
							const ac = Action.show(
								<div
									onClick={() => {
										ac.close();
										resolve(['value1', 'value2']);
									}}
								>
									hello
								</div>
							);
						});
					}}
				/>
			</div>
		</>
	);
}
